import { useImageStore } from '@/hooks/image'
import { EGraph, ERecorderBrashColor, ERecorderOperation } from '@/core/mediaRecorder'
import { computed, DebuggerEvent, defineComponent } from 'vue'
export default defineComponent({
  name: 'ColorTool',
  setup() {
    /**图像工具 */
    const store = useImageStore()
    const activeManage = computed(() => store.state.activeManage)

    const colorActiveCss = ' ring-1 ring-red-650 ring-offset-3'

    const colorActive = computed(
      () => (status: ERecorderBrashColor) => activeManage.value?.color === status,
    )
    const colorSelectHandel = () => {
      const operat = activeManage.value?.operat
      activeManage.value?.flyback()
      switch (operat) {
        case ERecorderOperation.brush:
          activeManage.value?.brush()
          break
        case ERecorderOperation.circle:
          activeManage.value?.drawGraph(EGraph.circle)
          break
        case ERecorderOperation.line:
          activeManage.value?.drawGraph(EGraph.line)
          break
        case ERecorderOperation.rectangle:
          activeManage.value?.drawGraph(EGraph.rectangle)
          break
        case ERecorderOperation.triangle:
          activeManage.value?.drawGraph(EGraph.triangle)
          break
        default:
          break
      }
    }
    /**ui工具 */
    return () => (
      <>
        <div>
          <div class={'text-center'}>
            <div class={'inline-block w-24 p-3 border-t border-gray-EEEEEF border-solid '}></div>
          </div>
          <div class={' text-sm pl-2 text-gray-4D4E58 mb-2 '}>线条颜色</div>
          <span
            class={
              'w-4 h-4 m-3 inline-block cursor-pointer  rounded-sm' +
              (colorActive.value(ERecorderBrashColor.black) ? colorActiveCss : '')
            }
            style={{ backgroundColor: ERecorderBrashColor.black }}
            onClick={() => {
              if (activeManage.value && activeManage.value.color) {
                activeManage.value.color = ERecorderBrashColor.black
                colorSelectHandel()
              }
            }}
          ></span>
          <span
            class={
              'w-4 h-4 m-3 inline-block cursor-pointer  rounded-sm ' +
              (colorActive.value(ERecorderBrashColor.blue) ? colorActiveCss : '')
            }
            style={{ backgroundColor: ERecorderBrashColor.blue }}
            onClick={() => {
              if (activeManage.value && activeManage.value.color) {
                activeManage.value.color = ERecorderBrashColor.blue
                colorSelectHandel()
              }
            }}
          ></span>
          <span
            class={
              'w-4 h-4 m-3 inline-block cursor-pointer  rounded-sm' +
              (colorActive.value(ERecorderBrashColor.green) ? colorActiveCss : '')
            }
            style={{ backgroundColor: ERecorderBrashColor.green }}
            onClick={() => {
              if (activeManage.value && activeManage.value.color) {
                activeManage.value.color = ERecorderBrashColor.green
                colorSelectHandel()
              }
            }}
          ></span>
          <span
            class={
              'w-4 h-4 m-3 inline-block cursor-pointer rounded-sm' +
              (colorActive.value(ERecorderBrashColor.red) ? colorActiveCss : '')
            }
            style={{ backgroundColor: ERecorderBrashColor.red }}
            onClick={() => {
              if (activeManage.value && activeManage.value.color) {
                activeManage.value.color = ERecorderBrashColor.red
                colorSelectHandel()
              }
            }}
          ></span>
          <span
            class={
              'w-4 h-4 m-3 inline-block cursor-pointer  rounded-sm' +
              (colorActive.value(ERecorderBrashColor.yellow) ? colorActiveCss : '')
            }
            style={{ backgroundColor: ERecorderBrashColor.yellow }}
            onClick={() => {
              if (activeManage.value && activeManage.value.color) {
                activeManage.value.color = ERecorderBrashColor.yellow
                colorSelectHandel()
              }
            }}
          ></span>
        </div>
      </>
    )
  },
})
